<template>
    <div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">

            </el-table-column>
            
            <el-table-column prop="sender_name" label="赠送者" align="center">
            </el-table-column>
            <el-table-column prop="receiver_name" label="接收者" align="center">
            </el-table-column>
            <el-table-column prop="sent_at" label="赠送时间" align="center">
            </el-table-column>
        </el-table>

        <div class="tabListPage">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { giftRecord } from '../../../libs/api'
export default {
    data() {
        return {
            dialogManagementVisible: false,
            rules: {
                // name: [
                //     { required: true, message: '请输入名称', trigger: 'blur' },
                // ],
            },
            ruleForm: {},
            values: '',
            value: '',
            input: '',
            sortCard: '',
            content: '',
            dialogImageUrl: '',
            dialogTableVisible: false,
            dialogVisible: false,
            managementData: [],
            // 总数据
            tableData: [],
            currentPage: 1,
            PageSize: 10,
            fileList:[],
            pageSizes: [10],
            typeStatus:'',
            vipLx:'',
            totalCount: 1,
            vipCardId:'',
            modifyPopUp:false,
            id:'',
            modifyData:{}
        }
    },
    created() {
        this.getVipCardList()
    },
    methods: {
        // 显示第几页
    handleCurrentChange(val) {
        console.log(this.vipCardId)
      // 改变默认的页数
      this.currentPage = val
      this.getVipCardList()
    },
     // 分页
    // 每页显示的条数
    handleSizeChange(val) {

      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1

      this.getVipCardList()
    },
        // 获取会员卡列表
        getVipCardList() {
            giftRecord({
                page: this.currentPage,
                // limit: this.PageSize
            }).then(res => {
                console.log(res)
                this.tableData = res.data.data
                this.alltabData = res.data.data
                this.totalCount = res.data.total
            })
        },
        // 删除会员卡
        deleteVip(row) {
            this.$confirm('此操作将永久删除该礼物, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            giftDelete({
                id: row.id
            }).then(res => {
                console.log(res)
                this.getVipCardList()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        },
        modifyVip(row) {
            console.log(row)
            this.modifyData = row
            this.dialogImageUrl = row.logo
            this.id = this.modifyData.id
            this.modifyPopUp = true
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleRemove(file, fileList) {
            console.log(fileList);
            console.log(file);
        },
        handleButtonAdd() {
            this.dialogTableVisible = true
        },
        clickDelete() {
            this.dialogTableVisible = false
        },
        closeDialog(){
            this.modifyPopUp = false
            this.dialogImageUrl = ''
        },
        clickConfirm() {
            giftSave({
                name:this.ruleForm.name,
                description:this.ruleForm.description,
                logo:this.dialogImageUrl,
                price:this.ruleForm.price
            }).then(res => {
                Object.assign(this.ruleForm,{
                    name:'',
                    description:'',
                    price:'',
                })
                this.dialogImageUrl=''
                this.getVipCardList()
            })
            this.dialogTableVisible = false
        },
        modifyConfirm(){
            giftSave({
                name:this.modifyData.name,
                description:this.modifyData.description,
                logo:this.dialogImageUrl,
                price:this.modifyData.price,
                id:this.id
            }).then(res => {
                Object.assign(this.modifyData,{
                    name:'',
                    description:'',
                    price:'',
                })
                this.dialogImageUrl=''
                this.id = ''
                this.getVipCardList()
            })
            this.modifyPopUp = false
        },
        modifyCancel(){
            this.modifyPopUp = false
            // Object.assign(this.modifyData,{
            //         name:'',
            //         description:'',
            //         price:'',
            //     })
            this.modifyData = {}
                this.dialogImageUrl=''
                this.id = ''
        },
        handleAvatarSuccess(res, file,fileList) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        console.log(res)
        console.log(URL.createObjectURL(file.raw))
        this.fileList = fileList
        this.ruleForm.img_url = res.data.url
        this.dialogImageUrl = res.data.url
        // this.ruleForm.img_url = URL.createObjectURL(file.raw)
      },
      deleteImg(){
            this.dialogImageUrl = ''
        }
    }
}
</script>

<style>
.tab {
    display: flex;
    align-items: center;
    margin: 30px 30px;
}

.tabSearch {
    display: flex;
}

.addBtn {
    margin-left: 30px;
    margin-bottom: 30px;
}
.ql-editor {

height: 300px;

}
</style>
